<style>
  a{
    color: #fff;
    text-decoration:none;
    /*font-size: 17px;*/
  }
  .username{
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 20px;
  }
</style>
<div style="position: fixed;top: 0px;width: 100%;z-index: 100" >
  <mat-toolbar color="primary" class="mytoolbar"  class="center">
    <div nz-row style="width: 80%;">
      <div nz-col nzSpan="12">
        <span>MOVIES</span>
      </div>

      <div nz-col nzSpan="4" class="right">
        <a routerLink="movies" routerLinkActive="active">推荐电影</a>
      </div>
      <div nz-col nzSpan="4" class="right">
        <a routerLink="score">评分电影</a>
      </div>
      <div nz-col nzSpan="1" class="right">
        <!--        <a routerLink="interest">兴趣标签</a>-->
      </div>
      <div nz-col nzSpan="3" class="right">
        <mat-icon style="margin-right: 5px; font-size: 18px;height: 20px">face</mat-icon>
        <span class="username">{{username}}</span>
      </div>
    </div>
  </mat-toolbar>
</div>
<router-outlet></router-outlet>
<div style="position: fixed;bottom: 0px;width: 100%;z-index: 100">
  <mat-toolbar  color="primary" class="center">
    <span>MOVIES</span>
  </mat-toolbar>
</div>
